<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .main {
      width: 1150px;
      margin: 20px auto;
    }

    .tags {
      width: 100%;
      padding: 10px;
      box-shadow: 0 0 2px 2px #ccc;
      display: flex;
      column-gap: 15px;
    }

    hr {
      margin: 10px 0;
    }

    .tags>li {
      list-style: none;
      line-height: 20px;
      padding: 5px;
      background-color: #eee;
      cursor: pointer;
      user-select: none;
    }

    .tags>.checked {
      background-color: red;
      color: white;

    }

    .container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 10px;

    }

    .box {
      width: 220px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      row-gap: 15px;
      box-shadow: 0 0 2px 2px #ccc;
    }

    .box>img {
      width: 100%;
      aspect-ratio: 22/29;
    }
  </style>
</head>

<body>
  <main class="main">
    <ul class="tags"></ul>
    <hr>
    <div class="container">
      <div class="box">
        <img src="https://static.zhonglian.com/upload/200021/2024/03/26/16/41a67a41a7886c7e97bcfd804a78aa99.png">
        <h5>生死游戏，九死一生</h5>
        <div>
          生死游戏，九死一生
        </div>
      </div>
    </div>
  </main>
  <script src="./axios.min.js"></script>
  <script>
    let btn = document.querySelector('#btn')
    let tags = document.querySelector('.tags')
    let container = document.querySelector('.container')

    axios({
      url: 'http://playlet.zonelian.com/api/category/list',
      method: 'GET',
      params: {
        zlsj: 'zlsj'
      }
    }).then(res => {
      let list = res.data.data.data
      list.forEach((item, index) => {
        let li = document.createElement('li')
        tags.appendChild(li)
        li.textContent = item.name
        li.dataset.name = item.name_en
        if (index == 9) {
          li.className = 'checked'
          getMovie(item.name_en)
        }
      })
    })
    tags.addEventListener('click', event => {
      let tg = event.target
      let lis = tags.querySelectorAll('li')

      if (tg.tagName == 'LI') {
        lis.forEach(li => {
          li.className = ''
        })
        tg.className = 'checked'
        let nameEn = tg.dataset.name
        getMovie(nameEn)
      }
    })
    function getMovie(nameEn) {
      axios({
        url: 'https://playlet.zonelian.com/api/playlet/list',
        method: 'GET',
        params: {
          name_en: nameEn,
          zlsj: 'zlsj'
        }
      }).then(res => {
        console.log(res.data.data.data);
        let movieList = res.data.data.data
        let html = ''
        movieList.forEach(item => {
          html += `<div class="box">
                      <img src="${item.img}">
                      <h5>${item.title}</h5>
                      <div>
                        ${item.description}
                      </div></div>`
        })
        container.innerHTML = html
      })
    }
  </script>
</body>

</html>